/*

@description: 大件服务（style）

@author: 赖赖

@update: 2021年9月6日14:07:37

*/

// 全局变量
@width: 1200px;
@color:rgb(34,38,50);
@btcolor:rgb(198, 43, 37);
@btfont-size:38px;


// 主体
main{

    // 大件服务图
    .cpfw{
        height: 440px;
        background: url('https://www.jdl.cn/_nuxt/img/banner.0b35eb7.png');
        background-size: cover;
        
        hgroup{//主体
            width: @width;
            margin: auto;
            display: flex;
            flex-direction:column;
            justify-content:center;

            h1{//标题1
                margin-top: 110px;
                font-size: 45px;
                color: rgb(250,250,250);
            }

            h2{//标题2
                margin-top: 35px;
                font-size: 16px;
                color: rgb(250,250,250);
            }
        }
    }

    //大件到仓服务
    .dcfw{
        height: 444px;
        background: url('https://www.jdl.cn/_nuxt/img/warehousing-bg.2dcab8e.jpg');
        
        hgroup{//标题
            margin-bottom: 40px;
            h1{
                padding-top: 35px;
                margin-bottom: 15px;
                font-size: @btfont-size;
                color: @btcolor;
                text-align: center; 
            }
            h2{
                font-size: 14px;
                text-align: center; 
            }
        }
        
        // 内容
        ul{
            width: @width;
            margin: auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            padding-left: 85px;

            li{// 单个
                display: flex;
                width: 302px;
                margin-bottom: 20px;
                
                img{// 图
                    width: 70px;
                    height: 70px;
                    background-size: cover;
                }

                dl{//标题框
                    padding-top: 5px;
                    margin-left: 5px;

                    dt{//标题1
                        font-size: 16px;
                        line-height: 30px;
                    }
    
                    dd{// 标题2
                        color: rgb(102, 102, 102);
                        font-size: 14px;
                    }
                }
            }
        }
        // 底部
        div{
            width: @width;
            margin: auto;

            section{
                display: flex;
                justify-content: space-around;

                h5{
                    width: 422px;
                    height: 1px;
                    background: rgb(228, 228, 228);
                    margin-top: 10px;
                }

                .z{
                    font-size: 12px;
                    color: rgb(102, 102, 102);
                }
            }

            p{
                margin-top: 18px;
                text-align: center;
                font-size: 14px;
                color: rgb(51, 51, 51);
            }
        }
    }

     // 大件商务仓
     .c{
        .t{//图
            float: left;
            .sw{//商务
                .t1{//图1
                    width: 800px;
                    height: 440px;
                    background: url('https://www.jdl.cn/_nuxt/img/business-class-bg.e70ec78.png');
                    position: relative;
        
                    .mb{//幕布
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        left: 0;
                        top: 0;
                        background: rgb(250,250,250);
                        opacity: 0.2;
                    }
                }
            }

            .sm{//说明
                width: 450px;
                height: 100%;
                float: right;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                h1{//标题
                    font-size: 38px;
                    color: rgb(250,250,250);
                }

                p{//段落
                    font-size: 14px;
                    text-align:justify;
                    color: rgb(250,250,250);
                    width: 250px;
                    padding-top: 10px;
                    margin-top: 30px;
                    line-height: 25px;
                    border-top: 2px solid rgb(250,250,250);
                }
            }
           
        }
        
        .wz{//文字
            box-sizing: border-box;

            .js{//介绍总体
                width: 760px;
                height: 440px;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-around;
                
                nav{//单个介绍
                    width: 290px;
                    float: left;
                    padding-top: 24px;
                    border-bottom: 1px solid rgb(235, 235, 235);
    
                    h1{//标题
                        font-size: 16px;
                        font-weight: 700;
                        padding-bottom: 10px;
                    }
    
                    p{//段落
                        line-height: 20px;
                        color: rgb(102, 102, 102);
                    }
                }
            }
        }
    }
}